<template>
	<view class="register-container fcolcc">
		<view class="register-title f34bc0 mb60">完善信息完成注册</view>

		<!-- 头像展示 -->
		<view class="avatar-container fcc mb40">
			<image class="avatar" :src="registerInfo.avatar || '/static/images/user/head.svg'"></image>
			<button class="change-avatar fcc f20c3" open-type="getUserInfo"
				@getuserinfo="$emit('get-user-info', $event)" :disabled="isGettingUserInfo">
				{{ registerInfo.avatar ? '更换头像' : '获取头像昵称' }}
			</button>
		</view>

		<!-- 信息展示 -->
		<view class="info-item fcsb mb30">
			<view class="f285c9">昵称</view>
			<view class="f28Bc3">{{ registerInfo.nickname || '未获取' }}</view>
		</view>
		<view class="info-item fcsb mb30">
			<view class="f285c9">手机号</view>
			<view class="f28Bc3">
				{{ registerInfo.code ? '已授权' : '未获取' }}
			</view>
		</view>

		<!-- 操作按钮 -->
		<button class="get-phone-btn fcc f28c3 mt20" open-type="getPhoneNumber"
			@getphonenumber="$emit('get-phone-number', $event)" :disabled="!registerInfo.nickname">
			获取手机号
		</button>

		<button class="register-btn fcc f28c3 mt40" :loading="isRegistering" @click="$emit('register')">
			完成注册
		</button>
	</view>
</template>

<script setup>
	defineProps({
		registerInfo: {
			type: Object,
			required: true
		},
		isGettingUserInfo: {
			type: Boolean,
			default: false
		},
		isRegistering: {
			type: Boolean,
			default: false
		}
	})

	defineEmits(['get-user-info', 'get-phone-number', 'register'])
</script>

<style lang="scss" scoped>
	.register-container {
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;

		.register-title {
			font-weight: bold;
		}

		.avatar-container {
			width: 180rpx;
			height: 180rpx;
			position: relative;

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 2rpx solid #eee;
			}

			.change-avatar {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				color: white;
				border-radius: 0 0 80rpx 80rpx;
				font-size: 20rpx;
			}
		}

		.info-item {
			width: 100%;
			height: 60rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.get-phone-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #4A90E2;
			color: #4A90E2;
			border-radius: 40rpx;
			background: transparent;
		}

		.register-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #4A90E2, #5D9BF2);
			color: white;
			border-radius: 40rpx;
			opacity: 0.9;

			&:disabled {
				opacity: 0.5;
				background: #ccc;
			}
		}
	}
</style>